<template>
	<view class="page">
		<view class="top">
			<p>{{index?array[index]:'户型'}}<i></i>
			<picker class="pick" @change="bindPickerChange" :value="index" :range="array">
									<view class="uni-input">{{array[index]}}</view>
								</picker>
			</p>
			
			
			<p>{{index_right?array_right[index_right]:'楼栋'}}<i></i>
			<picker class="pick" @change="bindPickerChange_right" :value="index" :range="array">
									<view class="uni-input">{{array_right[index_right]}}</view>
								</picker>
								</p>
		</view>
		<view class="toptitle">“万达广场一期住宅”的户型</view>
		
		
		<view class="list">
			<view :class="listid==1?'listbox active':'listbox'" @click="_listid(1)">
			<i></i>
			<image src="../../static/img/house/my_img.png" class="list_img" mode="widthFix">
			<p>1室0厅/111m²</p>
			</view>
			
			<view :class="listid==2?'listbox active':'listbox'" @click="_listid(2)">
			<i></i>
			<image src="../../static/img/house/my_img.png" class="list_img" mode="widthFix">
			<p>1室0厅/111m²</p>
			</view>
			
			<view :class="listid==3?'listbox active':'listbox'" @click="_listid(3)">
			<i></i>
			<image src="../../static/img/house/my_img.png" class="list_img" mode="widthFix">
			<p>1室0厅/111m²</p>
			</view>
			
		</view>
		
		<view class="bt_box_hr"></view>
		<view class="bt_box">
			<view :class="ok?'bt btok':'bt'" @click="_ok()">确认修改</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				listid:undefined,
				ok:false,
				id:'',
				array: ['1室0厅/111m²', '2室0厅/111m²', '3室1厅/111m²', '1室0厅/111m²'],
				index: 0,
				array_right: ['1栋', '2栋', '3栋', '4栋'],
				index_right: 0,
			}
		},
		onLoad(e) {
			let that = this;
			that._list()
		},
		methods: {
			// 下拉
			 bindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.detail.value)
			            this.index = e.detail.value
						this.ok=true
			},
			// 下拉
			 bindPickerChange_right: function(e) {
			            this.index_right = e.detail.value
						this.ok=true
			},
			// 选中
			_listid(e){
				this.listid = e
				this.ok =true
			},
			//取消
			exit(){
				this.del=false
			},
			//删除
			_del(e){
				this.del=true
				this.id= e
			},
			
			//确定删除
			_ok(e){
				
				let that = this
				that.api.post('mhc/add', that.id).then(res => {
					let temp = JSON.parse(res)
					if (temp) {
						uni.showToast({
							title: "删除成功",
							icon: 'none'
						})
						setTimeout(function() {
							that.del=false
							that._list()
						}, 1500)
					}
					
				})
				
				
				
			},
			
			//获取列表
			_list(){
				let that = this
				that.api.get('mhc/list').then(res => {
				
					let temp = JSON.parse(res.data)
					that.list = temp
					console.log("temp", temp);
				})
			},
			

			// 跳页
			_navigateTo(e) {
				uni.navigateTo({
					url: e
				});
			},

		}
	}
</script>

<style>
	.list{ width: 100%; height: auto; display: block; float: left; padding: 0 0 0 14rpx; box-sizing: border-box;}
	.listbox{ width: 334rpx; position: relative;
height: 388rpx; float: left;
background: #FFFFFF;
box-shadow: 0rpx 2rpx 3rpx 2rpx rgba(0,0,0,0.1);
border-radius: 8rpx 8rpx 8rpx 8rpx;
opacity: 1; margin: 0 0 16rpx 18rpx; overflow: hidden;}
.listbox image{ width: 334rpx; height: 334rpx; display: block; float: left;}
.listbox p{ width: 334rpx; height: 54rpx; line-height: 54rpx; text-align: center; display: block; float: left;font-size: 24rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #000000;
}

.listbox.active p{ background: rgba(254,87,0,0.05);}

.listbox i{
	width: 24rpx; height:24rpx; display: inline-block;
	margin: 0 0 0 0; position: absolute; right:10rpx;top:10rpx; z-index: 10;
	background: url(../../static/img/house/my_select.png) no-repeat;
	background-size: 100%; display: none;
}
.listbox.active i{ display: block;}

.top{ width: 100%; height: 72rpx;background: #FFFFFF; display: block; float: left;}
.top p{width: 50%; height: 72rpx; line-height: 72rpx; text-align: center;  background: #FFFFFF; display: block; float: left;font-size: 26rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #000000; position: relative;}

.top .pick{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;}

.top p i{
	width: 14rpx; height: 10rpx; display: inline-block;
	margin: 0 0 0 10rpx;
	background: url(../../static/img/house/my_down.png) no-repeat;
	background-size: 100%;
}

.toptitle{
	width: 100%; height: auto; display: block;float: left; padding: 26rpx 24rpx 32rpx;
	font-size: 28rpx;
	font-family: PingFang SC-Heavy, PingFang SC;
	font-weight: 800;
	color: #000000;
	line-height: 40rpx;
	box-sizing: border-box;
}





	.bt_box{ width: 100%;height: 156rpx;
background: #FFFFFF;
box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(255,131,14,0.2);
opacity: 1; position: fixed; left: 0; bottom: 0;
}
	.bt {
		width: 686rpx;
		height: 100rpx;
		background: #F6F6F6;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: 800;	
		color: #BEBEBE;
		display: block;
		float: left;
		margin: 12rpx 32rpx;
	}
	.btok {
		background: #FE5700;
		color:#ffffff;
	}
	.bt_box_hr{
		width: 100%;height: 200rpx; display: block; float: left;
	}

	page {
		background-color: #fff;
	}
</style>